<%@page import="com.user.entity.dto.TeacherDTO"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>学校在线考试系统 -- 教师端</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
	<link href="css/bootstrap-table.css" rel="stylesheet">
	<link href="css/mystyle.css" rel="stylesheet">
	<link href="css/test.css" rel="stylesheet">
	<link href="css/bootstrap-select.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
	<link href="css/font-awesome.min.css" rel="stylesheet">
	
	
<%-- <%!TeacherDTO teacher = new TeacherDTO(); %>
<%if(session.getAttribute("teacher")==null){
	response.sendRedirect("tch_login.jsp");
} else{
	teacher = (TeacherDTO)session.getAttribute("teacher");
}%> --%>
  </head>
  <body>
	
	<ul id="myTab" class="nav nav-tabs">
	    <li class="active"><a href="#single" data-toggle="tab"> 单选题</a></li>
	    <li><a href="#multiple" data-toggle="tab">多选题</a></li>
	    <li><a href="#judgment" data-toggle="tab">判断题</a></li>
	    <li><a href="#blank" data-toggle="tab">填空题</a></li>
	    <li><a href="#expl" data-toggle="tab">解答题</a></li>
	</ul>
	<div id="myTabContent" class="tab-content">
	    <div class="tab-pane fade in active" id="single">
	        <table id="singleList"></table>
	    </div>
	    <div class="tab-pane fade" id="multiple">
	        <table id="multipleList"></table>
	    </div>
	    <div class="tab-pane fade" id="judgment">
	        <table id="judgmentList"></table>
	    </div>
	    <div class="tab-pane fade" id="blank">
	        <table id="blankList"></table>
	    </div>
	    <div class="tab-pane fade" id="expl">
	        <table id="explList"></table>
	    </div>
	</div>
	
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    
    <script src="js/jquery-form.js"></script>
	<script src="js/bootstrap-table.js"></script>
	<script src="js/bootstrap-table-zh-CN.js"></script>
	<script src="js/bootstrap-select.min.js"></script>
	<script src="js/inputGroup-1.1.js"></script>
	<script src="js/jquery.validate.min.js"></script>
	<script src="js/messages_zh.js"></script>
	<script type="text/javascript">
	
	/*选项索引键值对*/
	var optionsKey={
			"1":"A","2":"B","3":"C","4":"D","5":"E","6":"F","7":"G","8":"H","9":"I","10":"J","11":"K","12":"L","13":"M","14":"N","15":"O","16":"P","17":"Q","18":"R","19":"S","20":"T","21":"U","22":"V","23":"W","24":"X","25":"Y","26":"Z"
	};
	
	$.getUrlParam = function (name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    };
    
    function selectSingle(id){
    	var elementId = $.getUrlParam('id');
        var parentElement = window.opener.document.getElementById(elementId);
        var items = $(parentElement).children('.subtopic-item');
        var index = items.length+1;
        $.ajax({
        	url:'single/findOne',
        	type:'post',
        	dataType:'json',
        	data:{id:id},
        	success:function(data){
        		if(data!=null){
        			var html = "";
        			html += "<div class=\"subtopic-item\">";
        			
        			html += "								<div class=\"input-group col-sm-2 pull-right\">\r\n" + 
        			"									<span class=\"input-group-addon\">分值</span>\r\n" + 
        			"									<input onkeyup=\"inputScore(this)\" class=\"form-control subtopic-score\" type=\"text\" name=\"subtopic_score\" required/>\r\n" + 
        			"								</div>\r\n";
        			
        			html += "<input type=\"hidden\" name=\"subtopic_id\" value="+data.id+">";
        			html += "<input type=\"hidden\" name=\"subtopic_type\" value=\"Single\">";
        			html += "<h4><span>"+index+"</span>."+data.title+"</h4>\r\n" + 
					"						<ul class=\"row list-style-none\">\r\n";
					var content = "";
					for(var i=0;i<data.options.length;i++){
						if(data.options[i].id == data.answer.id){
							content += "<li class=\"col-sm-6\">\r\n" + 
										"<p>\r\n" + 
										"<font color=\"red\">√</font>"+data.options[i].content+ 
										"</p>\r\n" + 
										"</li>\r\n";
						}else{
							content += "<li class=\"col-sm-6\">\r\n" + 
							"<p>\r\n" + 
							data.options[i].content+ 
							"</p>\r\n" + 
							"</li>\r\n";
						}
					}
					html += content;
					
					html += "</ul></div>";
					$(parentElement).append(html);
					alert("添加成功!");
        		}else{
        			alert("空数据!");
        		}
        	},
        	error:function(){
        		alert("error!");
        	}
        });
    }
    function selectMultiple(id){
    	var elementId = $.getUrlParam('id');
        var parentElement = window.opener.document.getElementById(elementId);
        var items = $(parentElement).children('.subtopic-item');
        var index = items.length+1;
        $.ajax({
        	url:'multiple/findOne',
        	type:'post',
        	dataType:'json',
        	data:{id:id},
        	success:function(data){
        		if(data!=null){
        			var html = "";
        			
        			html += "<div class=\"subtopic-item\">";
        			
        			html += "								<div class=\"input-group col-sm-2 pull-right\">\r\n" + 
        			"									<span class=\"input-group-addon\">分值</span>\r\n" + 
        			"									<input onkeyup=\"inputScore(this)\" class=\"form-control subtopic-score\" type=\"text\" name=\"subtopic_score\" required/>\r\n" + 
        			"								</div>\r\n";
        			
        			
        			html += "<input type=\"hidden\" name=\"subtopic_id\" value="+data.id+">";
        			html += "<input type=\"hidden\" name=\"subtopic_type\" value=\"Multiple\">";
        			html += "<h4><span>"+index+"</span>."+data.title+"</h4>\r\n" + 
					"						<ul class=\"row list-style-none\">\r\n";
					var content = "";
					for(var i=0;i<data.options.length;i++){
						var j = 0
						for(;j<data.answers.length;j++){
							if(data.options[i].id == data.answers[j].id){
								content += "<li class=\"col-sm-6\">\r\n" + 
									"<p>\r\n" + 
									"<font color=\"red\">√</font>"+data.options[i].content+ 
									"</p>\r\n" + 
									"</li>\r\n";
								break;
							}
						}
						if(j>=data.answers.length){
							content += "<li class=\"col-sm-6\">\r\n" + 
							"<p>\r\n" + 
							data.options[i].content+ 
							"</p>\r\n" + 
							"</li>\r\n";
						}
					}
					html += content;
					
					html += "</ul></div>";
					$(parentElement).append(html);
					alert("添加成功!");
        		}else{
        			alert("空数据!");
        		}
        	},
        	error:function(){
        		alert("error!");
        	}
        });
    }
    function selectJudgment(id){
    	var elementId = $.getUrlParam('id');
        var parentElement = window.opener.document.getElementById(elementId);
        var items = $(parentElement).children('.subtopic-item');
        var index = items.length+1;
        $.ajax({
        	url:'judgment/findOne',
        	type:'post',
        	dataType:'json',
        	data:{id:id},
        	success:function(data){
        		if(data!=null){
        			var html = "";
        			html += "<div class=\"subtopic-item\">";
        			
        			html += "								<div class=\"input-group col-sm-2 pull-right\">\r\n" + 
        			"									<span class=\"input-group-addon\">分值</span>\r\n" + 
        			"									<input onkeyup=\"inputScore(this)\" class=\"form-control subtopic-score\" type=\"text\" name=\"subtopic_score\" required/>\r\n" + 
        			"								</div>\r\n";
        			
        			
        			html += "<input type=\"hidden\" name=\"subtopic_id\" value="+data.id+">";
        			html += "<input type=\"hidden\" name=\"subtopic_type\" value=\"Judgment\">";
        			html += "<h4><span>"+index+"</span>."+data.title+"</h4>";
					if(data.answer){
						html += "答案:<font color=\"red\">√</font>";
					}else{
						html += "答案:<font color=\"red\">×</font>";
					}
					html += "</div>";
					$(parentElement).append(html);
					alert("添加成功!");
        		}else{
        			alert("空数据!");
        		}
        	},
        	error:function(){
        		alert("error!");
        	}
        });
    }
    function selectBlank(row){
    	alert(row);
    }
    function selectExpl(id){
    	var elementId = $.getUrlParam('id');
        var parentElement = window.opener.document.getElementById(elementId);
        var items = $(parentElement).children('.subtopic-item');
        var index = items.length+1;
        $.ajax({
        	url:'expl/findOne',
        	type:'post',
        	dataType:'json',
        	data:{id:id},
        	success:function(data){
        		if(data!=null){
        			var html = "";
        			html += "<div class=\"subtopic-item\">";
        			
        			html += "								<div class=\"input-group col-sm-2 pull-right\">\r\n" + 
        			"									<span class=\"input-group-addon\">分值</span>\r\n" + 
        			"									<input onkeyup=\"inputScore(this)\" class=\"form-control subtopic-score\" type=\"text\" name=\"subtopic_score\" required/>\r\n" + 
        			"								</div>\r\n";
        			
        			
        			html += "<input type=\"hidden\" name=\"subtopic_id\" value="+data.id+">";
        			html += "<input type=\"hidden\" name=\"subtopic_type\" value=\"Explanation\">";
        			html += "<h4><span>"+index+"</span>."+data.title+"</h4>";
					html += "<font color=\"red\">参考答案:</font><p>"+data.reference.content+"</p>";
					html += "</div>";
					$(parentElement).append(html);
					alert("添加成功!");
        		}else{
        			alert("空数据!");
        		}
        	},
        	error:function(){
        		alert("error!");
        	}
        });
    }
	//单选题加载表格
	$('#singleList').bootstrapTable({
		url:'single/findRealPage', // 服务器数据的加载地址
		method: 'get',  
	    dataType: "json",  
	    striped: true,// 设置为 true 会有隔行变色效果
	    undefinedText: "空",// 当数据为 undefined 时显示的字符
	    pagination: true, // 分页
	    toolbar: '#toolbar',
	   // paginationLoop:true,//设置为 true 启用分页条无限循环的功能。
	    // showToggle: "true",//是否显示 切换试图（table/card）按钮
	    // showColumns: "true",//是否显示 内容列下拉框
	    showRefresh: true,// 是否显示刷新按钮
	    pageNumber: 1,// 如果设置了分页，首页页码
	    // showPaginationSwitch:true,//是否显示 数据条数选择框
	    pageSize: 6,// 如果设置了分页，页面数据条数
	    // pageList: [5, 10, 20, 40], //如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
	    paginationPreText: '‹',// 指定分页条中上一页按钮的图标或文字,这里是<
	    paginationNextText: '›',// 指定分页条中下一页按钮的图标或文字,这里是>
	    // singleSelect: false,//设置True 将禁止多选
	    // search: true, //显示搜索框
	    data_local: "zh-US",
	    sidePagination: "server",
	    queryParams: function (params) {
	        return {
				page:(params.offset)/(params.limit)+1,
	            limit: params.limit,
	            sort:params.sort,
	            dir:params.order
	        };
	    },
	    idField: "id",// 指定主键列
	    columns: [
	    	{
	    		field:'id',
	    		title:'ID'
	    	},{
	    		title:'题目',
	    		formatter: function(value,row,index){
	    			var html = '<div class="quest-title-display">'+row.title+'</div>';
					var content = '';
					var length = Object.keys(row.options).length;
					var answerKey;
					for(var i=0;i<length;i++){
						if(i%2==0){
							content += '<ul class="row list-style-none">';
							content += '<li class="col-sm-6 quest-display">';
							if(row.answer.id==row.options[optionsKey[i+1]].id)
								answerKey = optionsKey[i+1];
							content += '<p>'+optionsKey[i+1]+'.</p>'+row.options[optionsKey[i+1]].content;
							content += '</li>';
						}else{
							content += '<li class="col-sm-6 quest-display">';
							if(row.answer.id==row.options[optionsKey[i+1]].id)
								answerKey = optionsKey[i+1];
							content += '<p>'+optionsKey[i+1]+'.</p>'+row.options[optionsKey[i+1]].content;
							content += '</li>';
							if(i!=0)
								content += '</ul>';
						}
					}
					content += '</ul>';
					content += '<font color="red">正确答案：'+answerKey+'</font>';
					html += content;
					
	    			return html;
	    		}
	    	},{
		        title: '操作',
		        formatter : function(value,row,index){
		        	var r = '<a class="fa fa-check-square-o btn btn-info" title="Remove" onclick="selectSingle('+row.id+')">选择</a>';
		        	return r;
	        }
	    }]
	      
	});
	// 多选题加载表格
	$('#multipleList').bootstrapTable({
		url:'multiple/findRealPage', // 服务器数据的加载地址
		method: 'get',  
	    dataType: "json",  
	    striped: true,// 设置为 true 会有隔行变色效果
	    undefinedText: "空",// 当数据为 undefined 时显示的字符
	    pagination: true, // 分页
	    toolbar: '#toolbar',
	   // paginationLoop:true,//设置为 true 启用分页条无限循环的功能。
	    // showToggle: "true",//是否显示 切换试图（table/card）按钮
	    // showColumns: "true",//是否显示 内容列下拉框
	    showRefresh: true,// 是否显示刷新按钮
	    pageNumber: 1,// 如果设置了分页，首页页码
	    // showPaginationSwitch:true,//是否显示 数据条数选择框
	    pageSize: 6,// 如果设置了分页，页面数据条数
	    // pageList: [5, 10, 20, 40], //如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
	    paginationPreText: '‹',// 指定分页条中上一页按钮的图标或文字,这里是<
	    paginationNextText: '›',// 指定分页条中下一页按钮的图标或文字,这里是>
	    // singleSelect: false,//设置True 将禁止多选
	    // search: true, //显示搜索框
	    data_local: "zh-US",// 表格汉化
	    sidePagination: "server", // 服务端处理分页
	    queryParams: function (params) {
	        return {
				page:(params.offset)/(params.limit)+1,
	            limit: params.limit,
	            sort:params.sort,
	            dir:params.order
	        };
	    },
	    idField: "id",// 指定主键列
	    columns: [
	    	{
	    		field:'id',
	    		title:'ID'
	    	},
	    	{
	    		title:'题目',
	    		formatter: function(value,row,index){
	    			var html = '<div class="quest-title-display">'+row.title+'</div>';
	    			var content = '';
					var length = Object.keys(row.options).length;
					var answerKey = new Array();
					
					for(var i=0;i<length;i++){
						if(i%2==0){
							for(var j=0;j<row.answers.length;j++){
								if(row.answers[j].id==row.options[optionsKey[i+1]].id){
									answerKey.push(optionsKey[i+1]);
								}
							}
							
							content += '<ul class="row list-style-none">';
							content += '<li class="col-sm-6 quest-display">';
							content += '<p>'+optionsKey[i+1]+'.</p>'+row.options[optionsKey[i+1]].content;
							content += '</li>';
							if(i==(length-1))
								content += '</ul>';
						}else{
							for(var j=0;j<row.answers.length;j++){
								if(row.answers[j].id==row.options[optionsKey[i+1]].id){
									answerKey.push(optionsKey[i+1]);
								}
							}
							
							content += '<li class="col-sm-6 quest-display">';
							content += '<p>'+optionsKey[i+1]+'.</p>'+row.options[optionsKey[i+1]].content;
							content += '</li>';
							if(i!=0)
								content += '</ul>';
						}
					}
					
					content += '<font color="red">正确答案：';
					for(var k=0;k<answerKey.length;k++){
						content += answerKey[k];
					}
					content += '</font>';
					html += content;
	    			return html;
	    		}
	    	},{
	        title: '操作',
	        formatter : function(value,row,index){
	        	var r = '<a class="fa fa-check-square-o btn btn-info" title="Remove" onclick="selectMultiple('+row.id+')">选择</a>';
	        	return r;
        	}
	        }]
	      
	});
	// 判断题加载表格
	$('#judgmentList').bootstrapTable({
		url:'judgment/findRealPage', // 服务器数据的加载地址
		method: 'get',  
	    dataType: "json",  
	    striped: true,// 设置为 true 会有隔行变色效果
	    undefinedText: "空",// 当数据为 undefined 时显示的字符
	    pagination: true, // 分页
	    toolbar: '#toolbar',
	   // paginationLoop:true,//设置为 true 启用分页条无限循环的功能。
	    // showToggle: "true",//是否显示 切换试图（table/card）按钮
	    // showColumns: "true",//是否显示 内容列下拉框
	    showRefresh: true,// 是否显示刷新按钮
	    pageNumber: 1,// 如果设置了分页，首页页码
	    // showPaginationSwitch:true,//是否显示 数据条数选择框
	    pageSize: 6,// 如果设置了分页，页面数据条数
	    // pageList: [5, 10, 20, 40], //如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
	    paginationPreText: '‹',// 指定分页条中上一页按钮的图标或文字,这里是<
	    paginationNextText: '›',// 指定分页条中下一页按钮的图标或文字,这里是>
	    // singleSelect: false,//设置True 将禁止多选
	    // search: true, //显示搜索框
	    data_local: "zh-US",// 表格汉化
	    sidePagination: "server",
	    queryParams: function (params) {
	        return {
				page:(params.offset)/(params.limit)+1,
	            limit: params.limit,
	            sort:params.sort,
	            dir:params.order
	        };
	    },
	    idField: "id",// 指定主键列
	    columns: [
	    	{
	    		field:'id',
	    		title:'ID'
	    	},
			{
		        title: '题目',
		        formatter : function(value,row,index){
		        	var html = '<div class="quest-title-display">'+row.title+'</div>';
					if(row.answer.content=='true'){
						html += '<font color=\"red\">答案:√</font>';
					}else{
						html += '<font color=\"red\">答案:×</font>';
					}
					
					return html;
		        }
	    	},{
		        title: '操作',
		        formatter : function(value,row,index){
		        	var r = '<a class="fa fa-check-square-o btn btn-info" title="Remove" onclick="selectJudgment('+row.id+')">选择</a>';
		        	return r;
				}
		        }
	    	]
	      
	});
	// 填空题加载表格
	$('#blankList').bootstrapTable({
		url:'blank/findPage', // 服务器数据的加载地址
		method: 'get',  
	    dataType: "json",  
	    striped: true,// 设置为 true 会有隔行变色效果
	    undefinedText: "空",// 当数据为 undefined 时显示的字符
	    pagination: true, // 分页
	    toolbar: '#toolbar',
	   // paginationLoop:true,//设置为 true 启用分页条无限循环的功能。
	    // showToggle: "true",//是否显示 切换试图（table/card）按钮
	    // showColumns: "true",//是否显示 内容列下拉框
	    showRefresh: true,// 是否显示刷新按钮
	    pageNumber: 1,// 如果设置了分页，首页页码
	    // showPaginationSwitch:true,//是否显示 数据条数选择框
	    pageSize: 6,// 如果设置了分页，页面数据条数
	    // pageList: [5, 10, 20, 40], //如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
	    paginationPreText: '‹',// 指定分页条中上一页按钮的图标或文字,这里是<
	    paginationNextText: '›',// 指定分页条中下一页按钮的图标或文字,这里是>
	    // singleSelect: false,//设置True 将禁止多选
	    // search: true, //显示搜索框
	    data_local: "zh-US",// 表格汉化
	    sidePagination: "server",
	    queryParams: function (params) {
	        return {
				page:(params.offset)/(params.limit)+1,
	            limit: params.limit,
	            sort:params.sort,
	            dir:params.order
	        };
	    },
	    idField: "id",// 指定主键列
	    columns: [
	    	{
	    		field:'id',
	    		title:'ID'
	    	},
			{
		        title: '题目',
		        formatter : function(value,row,index){
		        	var html = '<div class="quest-title-display">'+row.content+'</div>';
		        	html += '<font color=\"red\">参考答案：';
		        	var length = Object.keys(row.blanks).length;
					for(var i=0;i<length;i++){
						html += row.blanks[i+1].content;
						if(i<length-1)
							html += '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
					}
					html += '</font>';
					return html;
		        }
	    	},{
		        title: '操作',
		        formatter : function(value,row,index){
		        	var r = '<a class="fa fa-check-square-o btn btn-info" title="Select" onclick="selectBlank('+index+')">选择</a>';
		        	return r;
				}
		        }
	    	]
	      
	});
	// 解答题加载表格
	$('#explList').bootstrapTable({
		url:'expl/findRealPage', // 服务器数据的加载地址
		method: 'get',  
	    dataType: "json",  
	    striped: true,// 设置为 true 会有隔行变色效果
	    undefinedText: "空",// 当数据为 undefined 时显示的字符
	    pagination: true, // 分页
	    toolbar: '#toolbar',
	   // paginationLoop:true,//设置为 true 启用分页条无限循环的功能。
	    // showToggle: "true",//是否显示 切换试图（table/card）按钮
	    // showColumns: "true",//是否显示 内容列下拉框
	    showRefresh: true,// 是否显示刷新按钮
	    pageNumber: 1,// 如果设置了分页，首页页码
	    // showPaginationSwitch:true,//是否显示 数据条数选择框
	    pageSize: 6,// 如果设置了分页，页面数据条数
	    // pageList: [5, 10, 20, 40], //如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
	    paginationPreText: '‹',// 指定分页条中上一页按钮的图标或文字,这里是<
	    paginationNextText: '›',// 指定分页条中下一页按钮的图标或文字,这里是>
	    // singleSelect: false,//设置True 将禁止多选
	    // search: true, //显示搜索框
	    data_local: "zh-US",// 表格汉化
	    sidePagination: "server", // 服务端处理分页
	    queryParams: function (params) {
	        return {
				page:(params.offset)/(params.limit)+1,
	            limit: params.limit,
	            sort:params.sort,
	            dir:params.order
	        };
	    },
	    idField: "id",// 指定主键列
	    columns: [
	    	{
	    		field:'id',
	    		title:'ID'
	    	},
	    	{
		        title: '题目',
		        formatter: function(value,row,index){
		        	var html = '<div class="quest-title-display">'+row.title+'</div>';
					html += "<font color=\"red\">参考答案:</font>"+row.reference.content;
	    			return html;
	    		}
	    	},{
		        title: '操作',
		        formatter : function(value,row,index){
		        	var r = '<a class="fa fa-check-square-o btn btn-info" title="选择" onclick="selectExpl('+row.id+')">选择</a>';
		        	return r;
	        	}
			}
	    	]
	      
	});
	
	</script>
  </body>
</html>